<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>单个帖子</title>
    <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
    <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script th:src="@{/airent/js/vue.js}"></script>
</head>
<body>
<!--    引入头部-->
<div th:replace="~{head/topbar::topBar}"></div>
<div class="container">
    <div id="app">
        <div>
            <div class="fixed-bottom" style="width: 150px">
                <div>
                <span href="#" class="text-success" onclick="getFocus()">
                    <svg width="50" height="50" viewBox="0 0 16 16"
                         class="bi bi-chat-left-dots" fill="currentColor"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M14 1H2a1 1 0 0 0-1 1v11.586l2-2A2 2 0 0 1 4.414 11H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                    </svg>
                </span>
                    <a :href="'reportArticle.html?articleId='+article.articleId" class="text-danger">
                        <svg width="50" height="50" viewBox="0 0 16 16" class="bi bi-exclamation-square" fill="currentColor"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                            <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>

                        </svg>
                    </a>
                </div>

            </div>
        </div>

        <!--    显示帖子相关-->

        <div class="card mb-12 animate__animated ">

            <!--    显示帖子标题-->
            <div class="card-header" style="text-align:center">
                <h2 v-text="article.articleTitle">

                </h2>
                <small>发帖人：<span v-text="article.userDto.userName"></span></small>
                <!--    显示帖子内容-->
            </div>
            <article>
                <div v-html="article.articleContent" style="text-align:center"></div>
            </article>
        </div>


        <!--    显示留言-->
        <div id="comment" class="card mb-12 animate__animated animate__flipInX">
            <div class="card-header">
                <h5 class="card-title">评论</h5>
            </div>
            <div class="card-body text-dark">

<!--ceshi-->


              <!--  <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>-->
<!--                ceshi-->


                <div class="ibox-content no-padding">
                    <ul class="list-group">

                            <li class="list-group-item" v-if="reply.isprimary==0" v-for="reply,index in article.replyDtos" >

                                <div >
                                    <a class="text-info" href="index.html#" v-text="reply.fromName"></a>
                                    <p v-html="reply.content"></p>
                                    <small class="block text-muted"><i class="fa fa-clock-o"></i> {{getTimes(reply.time)}}前</small>

                                    <small><a class="text-info reply_btn" data-toggle="modal" data-target="#myModal"
                                              @click="getInfor(reply.fromId,reply.fromName,reply.replyId)">回复</a>
                                    </small>
                                    <p>
                                        <a  data-toggle="collapse" :href="'#collapseExample'+reply.replyId" role="button" aria-expanded="false" aria-controls="collapseExample">
                                            查看更多
                                        </a>

                                    </p>
                                </div>






                            </li>

                        <div  v-if="reply.isprimary!=0" class="collapse" :id="'collapseExample'+reply.isprimary" v-for="reply in article.replyDtos">
                            <a class="text-info" href="index.html#" v-text="reply.fromName"></a>
                            回复
                            <a class="text-info" href="index.html#">@<span v-text="reply.toName"></span></a>

                            <p v-html="reply.content"></p>
                            <small class="block text-muted"><i class="fa fa-clock-o"></i> {{getTimes(reply.time)}}前</small>
                            <small>
                                <div @click="getInfor(reply.toId,reply.toName,reply.isprimary)">
                                    <a class="text-info reply_btn" data-toggle="modal" data-target="#myModal">
                                        回复
                                    </a>
                                </div>
                            </small>
                        </div>



                    </ul>
                   <!-- <div v-for="reply,index in article.replyDtos" v-if="reply.isprimary!=0" class="collapse" :id="'collapseExample'+reply.isprimary">
                            <a class="text-info" href="index.html#" v-text="reply.fromName"></a>
                            回复
                            <a class="text-info" href="index.html#">@<span v-text="reply.toName"></span></a>

                            <p v-html="reply.content"></p>
                            <small class="block text-muted"><i class="fa fa-clock-o"></i> {{getTimes(reply.time)}}前</small>
                            <small>
                                <div @click="getInfor(reply.toId,reply.toName,reply.isprimary)">
                                    <a class="text-info reply_btn" data-toggle="modal" data-target="#myModal">
                                        回复
                                    </a>
                                </div>
                            </small>
                        </div>-->
                </div>

            </div>

        </div>


    </div>
    <div>
        <!--        回复区域-->
        <div class="row comment-box list-group-item">
            <div class="title">
                <h5>写下你的留言吧！</h5>
            </div>
            <!--    显示回帖区域-->
            <div id="div1"></div>
            <div class="col-md-3">
                <button type="button"
                        class="btn btn-success"
                        onclick="tijiao(1,editor1,vueApp.article.userId,vueApp.article.userDto.userName,1)">发送评论
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="div2">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="tijiao(0,editor,vueApp.toId,vueApp.toName,0)">Save
                    changes
                </button>
            </div>
        </div>
    </div>
</div>



<!--文本编辑器 留言-->
<!--<script type="text/javascript" src="/airent/plugins/editor/wangEditor-3.1.1/release/wangEditor.js"></script>-->
<!--<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>-->
<script type="text/javascript" src="/airent/js/Myedtior.js"></script>

<script type="text/javascript">

    var E = window.wangEditor
    var editor1 = new E('#div1')
    editor1.config.menus = [
        'bold',
        'head',
        'italic',
        'underline'
    ]
    editor1.config.zIndex = 500
    editor1.create()
</script>

<!--文本编辑 留言-->
<script type="text/javascript">

    var E = window.wangEditor
    var editor = new E('#div2')
    editor.config.menus = [
        'bold',
        'head',
        'italic',
        'underline'
    ]
    editor.create()
    function getFocus() {
        window.scrollTo(0, document.documentElement.scrollHeight-document.documentElement.clientHeight);
    }

</script>
<!--vue-->
<script>
    var vueApp = new Vue({
        el: "#app",
        data: {
            article: {},
            arctileId: 0,
            toId: 0,
            toName: '',
            mainId:0
        },
        created() {
            let id = window.localStorage.getItem("id")
            if (id == null) {
                window.location.href = '/index.html'
            }
            let url = '/article/singleQuery'
            $.get(url, {
                id: id
            }, function (data) {
                console.log(data)
                vueApp.article = data

            })

            // localStorage.removeItem("id");
        },
        methods: {
            getInfor: function (id, name,mainId) {
                this.toId = id
                this.toName = name
                this.mainId = mainId

            }

        },
        computed:{
            getTimes:function () {
               return function (t) {
                    let days = Math.floor((Date.parse(new Date())-t)/1000/60/60/24)
                   if (days>1){
                       return days+"天";
                   }
                   let hours = Math.floor((Date.parse(new Date())-t)/1000/60/60)

                   let min = Math.floor((Date.parse(new Date())-t)/1000/60)
                   if (hours>1){
                       return hours+"小时";
                   }else {
                       return min+"分钟";
                   }
               }
            }
        }


    })
</script>

<!--自定义函数-->
<script>

    function tijiao(isprimary, e, id, toName,MymainId) {
        let aId = vueApp.article.articleId
        let mainId = 0
        if (MymainId==1){
            mainId = 0
        }
        if (mainId == 0){
            mainId = vueApp.mainId
        }
        let content = e.txt.html()
        if (content == null || content == '' || content == '<p><br></p>') {
            alert("请填写内容")
            return;
        }

        console.log(content)
        let data = {
            content: content,
            toId: id,
            isprimary: isprimary,
            articleId: aId,
            toName: toName,
            isprimary:mainId
        }
        $.ajax({
            type: "post",
            url: '/article/reply',
            data: JSON.stringify(data),
            contentType: "application/json",
            // contentType: "application/json",
            success: function (data) {
                location.reload()
            }
        });
    }
</script>
</body>
</html>